<div class="popup-cnt">
  <div class="popup-row">
    <md-input-container>
      <label>Group</label>
      <input ng-model="data.group"/>
    </md-input-container>
    <md-input-container>
      <label>Direction title</label>
      <input ng-model="data.title">
    </md-input-container>
    <md-input-container>
      <label>Direction description</label>
      <textarea ng-model="spec.title"></textarea>
    </md-input-container>
  </div>

  <div class="popup-row" ng-switch on="editing" ng-show="showMs">

    <md-input-container ng-switch-when="true">
      <label>Duration (in ms)</label>
      <input type="number" ng-model="spec.duration">
    </md-input-container>

    <span ng-switch-default class="popup-label">Duration (in ms)</span>
    <span ng-switch-default class="popup-input">{{spec.duration}}</span>
  </div>

  <div class="popup-row" ng-switch on="editing" ng-show="showMs">

    <md-input-container ng-switch-when="true">
      <label>Minor Divisions (in ms)</label>
      <input type="number" ng-model="spec.divisions.minor">
    </md-input-container>

    <span ng-switch-default class="popup-label">Minor Divisions (in ms)</span>
    <span ng-switch-default class="popup-input">{{spec.divisions.minor}}</span>
  </div>

  <div class="popup-row" ng-switch on="editing" ng-show="showMs">

    <md-input-container ng-switch-when="true">
      <label>Major Divisions (in ms)</label>
      <input type="number" ng-model="spec.divisions.major">
    </md-input-container>

    <span ng-switch-default class="popup-label">Major Divisions (in ms)</span>
    <span ng-switch-default class="popup-input">{{spec.divisions.major}}</span>
  </div>

  <div class="popup-row" ng-switch on="editing">
    <md-input-container ng-switch-when="true">
      <label>Duration (in frames)</label>
      <input type="number" ng-model="spec.frames">
    </md-input-container>

    <span ng-switch-default class="popup-label">Duration (in frames)</span>
    <span ng-switch-default class="popup-input">{{spec.frames}}</span>
  </div>

  <div class="popup-row" ng-switch on="editing">
    <md-input-container ng-switch-when="true">
      <label>Minor Divisions (in frames)</label>
      <input type="number" ng-model="spec.divisions.minorFrames">
    </md-input-container>

    <span ng-switch-default class="popup-label">Minor Divisions (in frames)</span>
    <span ng-switch-default class="popup-input">{{spec.divisions.minorFrames}}</span>
  </div>

  <div class="popup-row" ng-switch on="editing">
    <md-input-container ng-switch-when="true">
      <label>Major Divisions (in frames)</label>
      <input type="number" ng-model="spec.divisions.majorFrames">
    </md-input-container>

    <span ng-switch-default class="popup-label">Major Divisions (in frames)</span>
    <span ng-switch-default class="popup-input">{{spec.divisions.majorFrames}}</span>
  </div>

  <div class="popup-row" ng-switch on="editing">
    <md-radio-group ng-switch-when="true" ng-model="spec.fps">
      <md-radio-button ng-value="fps66">66.67 (15ms / frame)</md-radio-button>
      <md-radio-button ng-value="fps60">60 (16.66ms / frame)</md-radio-button>
      <md-radio-button ng-value="fps30">30 (33.33ms / frame)</md-radio-button>
    </md-radio-group>

    <span ng-switch-default class="popup-label">Frames Per Second</span>
    <span ng-switch-default class="popup-input">{{spec.fps}}</span>
  </div>

  <div class="popup-row">
    <md-checkbox ng-model="spec.exactTiming">
      Show exact timings
    </md-checkbox>
  </div>
</div>
